<template>
  <div class="navbar">
    <grid :show-vertical-dividers="false" :rows="5" :show-lr-borders="false">
      <grid-item v-for="(item, index) in navbar" :link="{path: item.link}" :key="index">
        <img slot="icon" :src="item.src">
        <p>{{ item.title }}</p>
      </grid-item>
    </grid>
  </div>
</template>
  
<script>
  import { Grid, GridItem } from 'vux'
  export default {
		data (){
			return {
        navbar: [
          {
            link: '/list_classify',
            src: require('../../assets/nav1.png'),
            title: '分类'
          },
          {
            link: '/list_product?list=clothing',
            src: require('../../assets/nav2.png'),
            title: '服装城'
          },
          {
            link: '/list_product?list=life',
            src: require('../../assets/nav3.png'),
            title: '电器城'
          },
          {
            link: '/list_product?list=baby',
            src: require('../../assets/nav4.png'),
            title: '母婴专区'
          },
          {
            link: '/list_product?list=automobile',
            src: require('../../assets/nav5.png'),
            title: '汽车专区'
          },
          {
            link: '/list_experience',
            src: require('../../assets/nav6.png'),
            title: '体验心得'
          },
          {
            link: '/list_product?list=news',
            src: require('../../assets/nav7.png'),
            title: '新品发现'
          },
          {
            link: '/list_groupprice?list=groupprice',
            src: require('../../assets/nav8.png'),
            title: '团购热卖'
          },
          {
            link: '/list_groupprice?list=seckill',
            src: require('../../assets/nav9.png'),
            title: '限时秒杀'
          },
          {
            link: '/list_article',
            src: require('../../assets/nav10.png'),
            title: '帮助中心'
          },
        ]
			}
		},
		components : {	
      Grid, GridItem
		}
  }
</script>
<style>
  .navbar{
    width:100%; overflow:hidden;
  }
  .navbar .weui-grid {
    text-align: center; padding:15px 0 0;
  }
  .navbar .weui-grid p{
    color:#5a5a5a; line-height:.2rem; margin:0.05rem 0 0;
  }
  .navbar .weui-grid img{
    width:100%;
  }
  .weui-grid__icon{
    width:.44rem !important;
    height:.44rem !important;
  }
  .weui-grid:before{border-right:0 !important;}
  .weui-grid:after{border-bottom:0 !important;}
</style>